<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  	<title>${SYSTEM_NAME}</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css?v=${FILE_VERSION}" media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css?v=${FILE_VERSION}" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/fileUpload.css?v=${FILE_VERSION}">
    <style>
        body{
            background-color: #ffffff;
        }

        .container{
            border:2px solid #cccccc;
        }

		.dirIl{
			cursor: pointer;background-color:#fff;font-size: 18px;padding: 5px;text-align: left;
		}

        .il-icon{
            font-size: 22px;padding-right: 15px;
        }

		.dirIl:hover{
			background-color:#dbe9ff;color: #09AAFF;
		}

		.ilSelected{
			background-color:#dbe9ff;color: #09AAFF;border-left: 4px solid #09AAFF;font-weight: bold;
		}

		.filelist-container{
			background: #fff;cursor: pointer;
		}

		.filelist-container:hover{
			background-color: #eeeeee;border:1px solid #09AAFF;cursor: pointer;
		}

        .fileSelected{
            border:1px solid #09AAFF;background-color: #dbe9ff;
        }

		.filelist-img{padding:10px 10px 0px 10px;height: 0;
            padding-bottom: 100%;}

		.filelist-img img{width: 100%;}

        .filelist-text-container{
            height: calc(80vh);overflow-y: scroll;overflow-x: hidden;padding-left: 10px;
        }

		.filelist-text{text-align:center;padding:10px 15px 10px 15px;height: 48px}

        .left-line{
            border-left: 2px solid #cccccc;
        }

        .buttom-line{
            background-color: #cccccc;height: 1px;
        }

        .tools{
            padding: 10px 0px 10px 20px;
        }
        /*修改checkbox不可用时的颜色*/
        .layui-checkbox-disbaled span {
            background-color: #5FB878!important;
        }

	</style>
</head>
<body>
<input type="hidden" id="selectType" value="${selectType}">
<input type="hidden" id="objId" value="${objId}">
<input type="hidden" id="showFileType" value="${showFileType}">
<input type="hidden" id="storeMode" value="${storeMode}">
	<div class="layui-fluid">
        <div class="layui-row container">
            <div class="layui-col-xs2" >
                <div class="layui-btn-group" style="padding: 10px 0px 10px 10px;">
                        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="addDir">
                            <i class="layui-icon">&#xe624;</i>新建
                        </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="editDir">
                        <i class="layui-icon">&#xe642;</i>编辑
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="delDir">
                        <i class="layui-icon">&#xe640;</i>删除
                    </button>
                </div>
                <div class="buttom-line"></div>
                <input type="hidden" id="dirId" value="0">
                <div style="text-align: center;margin: 0 auto" >
                    <ul id="dirUl">

                    </ul>
                </div>
            </div>

            <div class="layui-col-xs10 left-line" >
                <div class="tools layui-form" style="background-color: #eee">
                    <c:if test="${selectTypeMap.size()>1}">
                        <input type="checkbox" name="fileType" title="全部文件"
                               lay-filter='fileType' value="" checked>
                    </c:if>
                    <c:forEach items="${selectTypeMap}" var="t">
                        <input type="checkbox" name="fileType" title="${t.value }"
                               lay-filter='fileType' value="${t.key }"
                               <c:if test="${selectTypeMap.size()==1}">checked disabled</c:if>
                        >
                    </c:forEach>
                </div>
                <div class="buttom-line"></div>
                <div id="tools" class="tools">
                    <c:if test="${selectType != 0}">
                        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" onclick="selectFile()">
                            <i class="layui-icon">&#xe857;</i>选择
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="addFile" style="margin-right: 10px;">
                            <i class="layui-icon">&#xe67c;</i>上传
                        </button>
                    </c:if>
                    <c:if test="${selectType == 0}">
                        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="addFile" style="margin-right: 10px;">
                            <i class="layui-icon">&#xe67c;</i>上传(至OSS)
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="addFileForVod" style="margin-right: 10px;">
                            <i class="layui-icon">&#xe67c;</i>上传(至视频点播，只限音视频)
                        </button>
                    </c:if>
                    <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="delFiles">
                        <i class="layui-icon">&#xe640;</i>删除
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="moveFiles">
                        <i class="layui-icon">&#xe67d;</i>移动目录
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="renameFile">
                        <i class="layui-icon">&#xe642;</i>编辑文件名
                    </button>
                </div>

<%--                <div id="toolsRecycle" class="tools">--%>
<%--                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="selectFile">--%>
<%--                        <i class="layui-icon">&#xe857;</i>恢复文件--%>
<%--                    </button>--%>
<%--                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="addFile" style="margin-right: 10px;">--%>
<%--                        <i class="layui-icon">&#xe67c;</i>彻底删除--%>
<%--                    </button>--%>
<%--                </div>--%>
                <div class="buttom-line"></div>
                <input type="hidden" id="fileId">
                <div class="filelist-text-container">
                    <div id="fileDiv" class="layui-row layui-col-space20">
                    </div>
                </div>
            </div>
        </div>
    </div>

	<script type="text/html" id="dateTpl">
		{{  new Date(d.dateCreate).format("yyyy-MM-dd hh:mm:ss") }}
	</script>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="setUser">选择</a>
	</script>
	<script src="${pageContext.request.contextPath}/static/js/common-2.0.0.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js?v=${FILE_VERSION}"></script>
    <script src="${pageContext.request.contextPath}/static/js/upload/fileUpload-2.0.0.js?v=${FILE_VERSION}"></script>
<script>
//JavaScript代码区域
var table;
var layer;
var flow;
layui.use(['form','table','element','layer','flow','upload'], function(){
	var element = layui.element;
	layer = layui.layer;
	flow = layui.flow;
    var form = layui.form;
    var upload = layui.upload;
    var selectType= $("#selectType").val();
    if(selectType== 0){//代表此页面不是从其他页面的文件上传功能点进来的，而是直接打开系统功能里的文件管理页面
        $uploadFileManage({upload:upload,element:element,elem:"#addFile"});
        $uploadFileManage({upload:upload,element:element,elem:"#addFileForVod",storeMode:'vod'});
    }else{
        $uploadFileManage({upload:upload,element:element,elem:"#addFile",storeMode:$("#storeMode").val()});
    }
	createDir();
    createFile();

    form.on('checkbox(fileType)', function(data){
        //下面代码其实就是把复选改成单选
        $("input[name='fileType']").prop("checked", false);   //全部取消选中
        $(this).prop("checked", true);  //勾选当前选中的选择框     
        form.render('checkbox');
        createFile();
    });

    /****文件目录操作******/
    $("#addDir").click(function(){
        addDir();
    });

    $("#editDir").click(function(){
        addDir($("#dirId").val());
    });

    $("#delDir").click(function(){
        delDir($("#dirId").val());
    });

    /******文件操作********/
    $("#delFiles").click(function(){
        delFiles();
    });

    $("#renameFile").click(function(){
        renameFile();
    });

    $("#moveFiles").click(function(){
        moveFiles();
    });

});

function createFile(isRecycle){
    var url = "/sys/file/fileList";
    if(isRecycle)
        url = "/sys/file/fileRecycleList";
    $("#fileDiv").html("");
    flow.load({
        elem: '#fileDiv' //指定列表容器
        ,end : '<div style="clear: both">没有更多了</div>'
        ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
            var lis = [];
            $ajax({
                url: url,
                data:{
                    "current" : page,
                    "size": 12,
                    "dirId" : $("#dirId").val(),
                    "fileType" : $('input[name="fileType"]:checked').val(),
                    "storeMode": ($("#selectType").val()==0?'all':$("#storeMode").val())
                },
                isShowLayer : false,
                isShowLoading :false,
                succCallback: function (json) {
                    if(json.code == 0){
                        layui.each(json.data.records, function(index, item){
                            var html = '<div fileId="' + item.id + '" fileUrl="' +item.fileUrl + '" ' + '" fileExt="' +item.fileExt + '" ' +
                                'class="layui-col-md2 layui-col-sm4" title="文件大小：' + item.fileSize + ',存储方式：'+item.storeMode+'" onclick="fileClick(this)">' +
                                '<div class="filelist-container">' +
                                '<div class="filelist-img">' +
                                '<img src="' + getIconSrcByExt(item.fileUrl, item.fileExt) + '">' +
                                '</div>' +
                                '<div class="filelist-text">' +
                                '<p class="info">' + item.realFileName + '</p>' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                            lis.push(html);
                        });
                    }
                    next(lis.join(''), page < json.data.totalPage);
                }
            });
        }
    });
}

function createDir(){
    $("#dirUl").html("");
	$ajax({
		url: "/sys/file/getAll",
		isShowLayer : false,
		succCallback: function (json) {
			if(json.code == 0){
				var list = json.data;
				var inputStr = "";
				inputStr += '<li class="dirIl ilSelected" dataId="0" onclick="liClick(this)"><i class="layui-icon  il-icon" >&#xe60a;</i>默认目录</li>';
				for (var i = 0; i < list.length; i++) {
					inputStr += '<li class="dirIl" dataId="' + list[i].id + '" onclick="liClick(this)">';
					inputStr += '<i class="layui-icon  il-icon" >&#xe656;</i>' + list[i].name;
					inputStr += '</li>';
				}
                // inputStr += '<li class="dirIl" dataId="100" onclick="liClick(this)"><i class="layui-icon  il-icon" >&#xe698;</i>回收站</li>';
				$("#dirUl").html(inputStr);
			}
		}
	});
}

/**文件夹选择 **/
function liClick(li) {
    var dirId = $(li).attr("dataId");
	var lis = $(li).siblings();
	$(lis).each(function(){
		$(this).removeClass("ilSelected");
	});
	$(li).addClass("ilSelected");
    $("#dirId").val(dirId);
	if(dirId == 100){  //回收站
        $("#dirId").val(0);
        createFile(true);
        return;
    }
    createFile();
}

/**文件选择 **/
function fileClick(file){
    if($(file).children().hasClass("fileSelected")){
        $(file).children().removeClass("fileSelected");
    }else{
        $(file).children().addClass("fileSelected");
    }
    // $("#fileId").val($(file).attr("fileId"));
}

/***********文件目录操作**********/
function addDir(id){
    var url = getContextPath() + "/sys/file/addDir";
    if(id == null){
        url = getContextPath() +  url;
    }else{
        if(id == '' || id == '0'){
            layer.msg("默认目录不允许修改，请重新选择");
            return;
        }
        url = getContextPath() +  url + '?id=' + id;
    }
    layer.open({
        title : "添加修改目录",
        type: 2,
        area: ['400px', '200px'],
        anim: 2,
        content: [url, 'no']
    });
}

function delDir(id){
    if(id == '' || id == '0'){
        layer.msg("默认目录不允许删除");
        return;
    }
    layer.confirm('真的删除此项记录么?此目录下如有文件，将会把文件转移到默认目录。', function(index){
        $ajax({
            url: getContextPath() + "/sys/file/del/deleteById",
            data: {
                id : id
            },
            succCallback: function (json) {
                if(json.code == 0){
                    $("[dataId=" + id + "]").remove();
                }
            }
        });
    });
}

/************文件操作*************/
function delFiles(id){
    var ids = getSelectFileIds();
    if(ids.length == 0){
        layer.msg("请选择要删除的文件");
        return;
    }
    layer.confirm('你确定要删除文件吗？', function(index){
        $ajax({
            url: getContextPath() + "/sys/file/delFiles",
            data: {
                ids : ids
            },
            succCallback: function (json) {
                if(json.code == 0){
                    $.each(getSelectFiles(),function(index,file){
                        file.remove();
                    });
                }
            }
        });
    });
}

function addFile(fileEntryList){
    createFile();
}

function renameFile() {
    var files = getSelectFiles();
    if(files.length == 0){
        layer.msg("请选择文件。");
        return;
    }
    if(files.length != 1){
        layer.msg("您只能选择一个文件。");
        return;
    }
    var id=files[0].attr("fileId");
    layer.open({
        title : "修改文件名",
        type: 2,
        area: ['400px', '180px'],
        anim: 2,
        content: [getContextPath() + "/sys/file/renameFileInput?id=" + id, 'no']
    });
}

function renameFileBack(id, name) {
    var obj = $("[fileId=" + id + "]");
    obj.find(".info").html(name);
}

function moveFiles(){
    var ids = getSelectFileIds();
    if(ids.length == 0){
        layer.msg("请选择要删除的文件");
        return;
    }
    if(ids.split(",").length > 6){
        layer.msg("您最多能同时移动6个文件，请重新选择");
        return;
    }
    layer.open({
        title : "移动文件目录",
        type: 2,
        area: ['400px', '500px'],
        anim: 2,
        content: [getContextPath() + "/sys/file/moveFileInput?ids=" +ids, 'no']
    });
}

function moveFileBack() {
    $.each(getSelectFiles(),function(index,file){
        file.remove();
    });
    // $("[fileId=" + id + "]").remove();
}

function selectFile(){
    var files = getSelectFiles();
    if(files.length == 0){
        layer.msg("请选择文件。");
        return;
    }
    var selectType = $("#selectType").val();
    var objId = $("#objId").val();
    if(selectType == 1){   //单文件选择
        if(files.length != 1){
            layer.msg("您只能选择一个文件。");
            return;
        }
        var fileUrl = files[0].attr("fileUrl");
        var fileExt = files[0].attr("fileExt");
        var obj = $("#" + objId, window.parent.document);
        obj.parent().find(".closeBtu").remove();
        obj.attr('src',getIconSrcByExt(fileUrl,fileExt));
        obj.parent().find(".fileUrl").val(fileUrl);
        obj.parent().append('<div class="closeBtu" onclick="deleteFile(\'' + fileUrl + '\',this)"><img src=' + getContextPath() + '"/static/images/xbtn.png"></div>');
    }else if(selectType == 2){  //多文件选择
        if(files.length >12){
            layer.msg("您一次最多能选择12个文件。");
            return;
        }

        var suffixArr = "avi,wmv,mpg,mov,rm,ram,swf,mp4";
        for(var i =0;i<files.length;i++){
            var fileUrl = files[i].attr("fileUrl");
            var obj = $("#" + objId, window.parent.document);

            var html = "";
            var urlSuffix = fileUrl.substring(fileUrl.lastIndexOf(".")+1,fileUrl.length);
            var int = suffixArr.indexOf(urlSuffix);
            if(int>0){//用于多视频文件选择
                html += '<li class="layui-upload-list"  style="width:190px;">';
                html += '<input value="' + fileUrl + '" type="hidden" class="fileUrlInput">';
                html += '<video class="layui-upload-video" controls="controls" poster="/static/images/fileupload/vedio.png" src="' + getSrcByExtV(fileUrl) + '"></video>';
            }else{
                html += '<li class="layui-upload-list"  style="width:100px;">';
                html += '<input value="' + fileUrl + '" type="hidden" class="fileUrlInput">';
                html += '<img class="layui-upload-img" src="' + getSrcByExt(fileUrl) + '">';
            }

            html += '<div class="closeBtu" onclick="deleteFile(\'' + fileUrl + '\',this,true)">';
            html += '<img src=' + getContextPath() + '"/static/images/xbtn.png">';
            html += '</div>';
            html += '</li>';
            $(obj).append(html);
        }
        parent.imgDrag();
    }
    parent.layer.closeAll();
}

function getSelectFileIds(){
    var ids = "";
    var files = $(".fileSelected");
    for(var i=0;i<files.length;i++){
        ids += $(files[i]).parent().attr("fileId") + ",";
    }
    return ids.substring(0,ids.length-1);;
}

function getSelectFiles(){
    var files = new Array();
    var objs = $(".fileSelected");
    if(objs.length == 0){
        return "";
    }
    for(var i=0;i<objs.length;i++){
        files.push($(objs[i]).parent());
    }
    return files;
}

function getSelectFileIds(){
    var ids = "";
    var objs = $(".fileSelected");
    if(objs.length == 0){
        return "";
    }
    for(var i=0;i<objs.length;i++){
        ids += $(objs[i]).parent().attr("fileId") + ",";
    }
    return ids.substring(0,ids.length-1);;
}

</script>
</body>
</html>